<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>

</head>
<body>

<form class="layui-form" action="" lay-filter="formData" id="app">

    <div class="layui-form-item">
        <label class="layui-form-label">字段中文名称</label>
        <div class="layui-input-block">
            <input type="text" name="show_name" required  lay-verify="required" placeholder="请输入字段中文名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字段名称</label>
        <div class="layui-input-block">
            <input type="text" name="col_name" required  lay-verify="required" placeholder="请输入字段名称" autocomplete="off" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label" >字段长度</label>
        <div class="layui-input-block">
            <input type="text" name="length" lay-verify="required"  placeholder="请输入字段长度" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label" >输入框宽度</label>
        <div class="layui-input-block">
            <input type="text" name="input_width" lay-verify="required"  placeholder="请输入输入框宽度" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" >列宽</label>
        <div class="layui-input-block">
            <input type="text" name="list_width" lay-verify="required"  placeholder="请输入列宽" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否可修改</label>
        <div class="layui-input-block">
            <select name="is_readonly" lay-verify="required">
                <option value=""></option>
                <option value="0">可修改</option>
                <option value="1">不可修改</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否为行内元素</label>
        <div class="layui-input-block">
            <select name="is_inline" lay-verify="required">
                <option value=""></option>
                <option value="1">否</option>
                <option value="0">是</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字段类型</label>
        <div class="layui-input-block">
            <select name="col_type" lay-verify="required">
                <option></option>
                <option value="varchar">varchar</option>
                <option value="int">int</option>
                <option value="double">double</option>
                <option value="text">text</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">小数点位数</label>
        <div class="layui-input-block">
            <input type="text" name="double_length"   placeholder="字段类型为double时必须填写" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">输入框类型</label>
        <div class="layui-input-block">
            <select name="col_style" lay-verify="required">
                <option></option>
                <option value="0">输入框</option>
                <option value="1">日期框</option>
                <option value="5">时分秒日期框</option>
                <option value="15">年月日期框</option>
                <option value="6">下拉框</option>
                <option value="12">下拉框多选</option>
                <option value="8">自定义下拉框</option>
                <option value="13">自定义下拉框多选</option>
                <option value="4">文件上传框</option>
                <!--<option value="2">多行文本框</option>-->
                <option value="3">文本编辑框</option>
                <option value="11">三级联动选择框</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" >说明</label>
        <div class="layui-input-block">
            <input type="text" name="msg" lay-verify="required"  placeholder="请输入说明" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" >数据字典key</label>
        <div class="layui-input-block">
            <select name="select_dict_id" lay-verify="required" placeholder="选择下拉框时必须要填写" >
                <option value="">请选择</option>
                <option :value="item.code_value" v-for="item in select_dict_id">{{item.code_name}}</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" >表id</label>
        <div class="layui-input-block">
            <select name="data_zygl_id" lay-verify="required" class="layui-form" lay-filter="data_zygl_id" placeholder="选择下拉框时必须要填写" >
                <option value="">请选择</option>
                <option :value="item.id" v-for="item in data_zygl_id">{{item.name}}</option>
            </select>
        </div>
    </div>

    <div class="layui-form" lay-filter="data_zygl_id_col">
        <div class="layui-form-item">
            <label class="layui-form-label" >自定义下拉框实际字段</label>
            <div class="layui-input-block">
                <select name="select_v" lay-verify="required" placeholder="选择下拉框时必须要填写"  >
                    <option value="">请选择</option>
                    <option :value="item.col_name" v-for="item in zygl_id_columns">{{item.show_name}}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >自定义下拉框显示字段</label>
            <div class="layui-input-block">
                <select name="select_text" lay-verify="required" placeholder="选择下拉框时必须要填写" >
                    <option value="">请选择</option>
                    <option :value="item.col_name" v-for="item in zygl_id_columns">{{item.show_name}}</option>
                </select>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">列表是否可编辑</label>
        <div class="layui-input-block">
            <select name="is_list_edit" lay-verify="required">
                <option></option>
                <option value="0">是</option>
                <option value="1">否</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">录入是否显示</label>
        <div class="layui-input-block">
            <select name="is_input" lay-verify="required">
                <option></option>
                <option value="0">是</option>
                <option value="1">否</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">列表是否显示</label>
        <div class="layui-input-block">
            <select name="is_list" lay-verify="required">
                <option></option>
                <option value="0">是</option>
                <option value="1">否</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否默认查询</label>
        <div class="layui-input-block">
            <select name="is_search" lay-verify="required">
                <option></option>
                <option value="0">是</option>
                <option value="1">否</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否可空</label>
        <div class="layui-input-block">
            <select name="is_null" lay-verify="required">
                <option></option>
                <option value="0">可空</option>
                <option value="1">不可空</option>
                <option value="3">uView上传</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" >排序号</label>
        <div class="layui-input-block">
            <input type="text" name="show_order"   placeholder="请输入排序号" autocomplete="off" class="layui-input">
        </div>
    </div>


    <button class="layui-btn" lay-submit lay-filter="*" id="submitbutton" style="display: none;">立即提交</button>
</form>

<script>
    var form = null;

    var vm = new Vue({
        el:"#app",
        data:{
            select_dict_id:[],
            data_zygl_id:[],
            zygl_id_columns:[],
            formData:{}
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                //Demo
                layui.use('form', function(){
                    form = layui.form;
                    form.on('select(data_zygl_id)', function(data){//监听下拉框选择事件
                        // console.log(data.elem); //得到select原始DOM对象
                        // console.log(data.value); //得到被选中的值
                        // console.log(data.othis); //得到美化后的DOM对象
                        post("/admin/api/DataManagementController/getAllFieldsAccordingToTheTable",{tableId:data.value},function (res) {
                            vm.zygl_id_columns = res.data;
                            // console.log(res.data)
                            vm.$nextTick(function () {
                                // form.val("formData", vm.formData);
                                form.render("select","data_zygl_id_col");
                            });
                        })

                    });
                });
                post("/admin/api/DataManagementController/getDataDictionary",{},function (res) {//加载数据字典下拉框
                    vm.select_dict_id = res.data;
                    vm.$nextTick(function () {
                        form.render("select");
                        form.val("formData", vm.formData);
                    });
                })
                post("/admin/api/DataManagementController/getTableAll",{},function (res) {//加载表Id下拉框
                    vm.data_zygl_id = res.data;
                    vm.$nextTick(function () {
                        form.render("select");
                        form.val("formData", vm.formData);
                        vm.getAllFieldsAccordingToTheTable(vm.formData.data_zygl_id);
                    });
                })
            },
            getAllFieldsAccordingToTheTable(tableId){//根据表获取下拉框相应的字段
                post("/admin/api/DataManagementController/getAllFieldsAccordingToTheTable",{tableId:tableId},function (res) {
                    vm.zygl_id_columns = res.data;
                    // console.log(res.data)
                    vm.$nextTick(function () {
                        form.val("formData", vm.formData);
                        form.render("select","data_zygl_id_col");
                    });
                })
            }
        }
    })

    //Demo
    layui.use('form', function(){
        form = layui.form;
        //监听提交
        form.on('submit(*)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    function getData() {
        var data1 = form.val("formData");
        return data1;
    }

    function setData(data) {
        vm.formData = data;
        //给表单赋值
        form.val("formData", data);
    }

</script>

</body>
</html>
